var contianer = document.getElementById('contianer');
var contianerText = contianer.innerHTML;
var creatDiv = document.createElement('div');
var creatNode = document.createTextNode(contianerText);
contianer.innerHTML = "<div id='contianer_son'>" + contianerText + "</div>";
var scrollD = document.createElement('div');
var scrollA = document.createElement('a');

function scroll() {
	scrollD.setAttribute('class', 'scrollD');
	scrollA.setAttribute('class', 'scrollA')
	scrollD.appendChild(scrollA);
	contianer.appendChild(scrollD);

	contianer.onmousewheel = function(e) { //chromer，IE，Opera 10+ safai 5+
		scrollFun(e);
	}
	contianer.addEventListener('DOMMouseScroll', function(e) { //firefox
		scrollFun(e);
	});
	startDrag(scrollA);
}
/*拖动事件*/
var startDrag = function(obj) {
	var flag = false;
	obj.onmousedown = function(e) {
		flag = true;
		var downPage = e.pageY;
		var objTOP = parseInt(getComputedStyle(obj, false).marginTop);
		document.onmousemove = function(e) {
			if(flag) {
				var movePage = e.pageY;
				obj.style.marginTop = objTOP + (movePage - downPage) + 'px';
				var objMarginTop = obj.offsetTop * (contianer_son.offsetHeight - contianer.offsetHeight) / (scrollD.offsetHeight - scrollA.offsetHeight);
				contianer_son.style.marginTop = 1 - objMarginTop + 'px'
				scrollFun(e);
			}
		}
	}
	document.onmouseup = function() {
		flag = false;
	}
}

function scrollFun(e) {
	window.event ? window.event.returnValue = false : e.preventDefault(); //阻止事件冒泡
	var bool = e.detail || -(e.wheelDelta); //wheelDelta兼容chromer，IE，Opera 10+ safai 5+；detail兼容firefox；滚动条滚动的方向
	var i;
	var contianer_son = document.getElementById('contianer_son');
	var max_margin_top = contianer_son.offsetHeight - contianer.offsetHeight; //获取内容的最大的marginTop;
	var center_height = 25 / max_margin_top;
	var weizhi = (scrollD.offsetHeight - scrollA.offsetHeight) * center_height;
	if(bool > 0) { //bool>0的时候说明鼠标往下滚；
		i = -25;

	} else {
		i = 25;
		weizhi = 0 - weizhi;
	}

	/*判断滚动条的位置*/
	scrollAndContents(i, weizhi, max_margin_top);
}

function scrollAndContents(i, weizhi, max_margin_top) {
	//当contianer_son.style.marginTop=0的时候，鼠标往下滚动时，i=-25；
	var contianer_son_marginTop = parseInt(contianer_son.style.marginTop || 0) + i;
	var scrollA_marginTop = parseInt(scrollA.style.marginTop || 0) + weizhi;
	contianer_son.style.marginTop = contianer_son_marginTop + "px";
	scrollA.style.marginTop = scrollA_marginTop + "px";
	parseInt(scrollA);
	if(contianer_son_marginTop < 0 - max_margin_top) {
		contianer_son.style.marginTop = 0 - max_margin_top + 'px';
	} else if(contianer_son_marginTop > 0) {
		contianer_son.style.marginTop = 0 + 'px';
	}
	if(scrollA_marginTop > 200) {
		scrollA.style.marginTop = 200 + 'px'
	} else if(scrollA_marginTop < 0) {
		scrollA.style.marginTop = 0 + 'px';
	}
}
window.onload = function() {
	scroll();
	socller2()
}

function socller2() {
	window.event ? window.event.returnValue = false : e.preventDefault(); //阻止事件冒泡
	var center = document.getElementById('socller');
	center.onmousewheel = function(e){
		if (e.wheelDelta < 0) { //当滑轮向上滚动时
            this.style.marginTop = -(parseInt(center.scrollHeight)-303)+'px';
        }else{
        	this.style.marginTop = 0;
        }
	}
}
var scollerFunc = function(e) {
	window.event ? window.event.returnValue = false : e.preventDefault(); //阻止事件冒泡
	var bool = e.detail || -(e.wheelDelta); //wheelDelta兼容chromer，IE，Opera 10+ safai 5+；detail兼容firefox；滚动条滚动的方向
}
